<script setup lang="ts">
import SingleViewer from '@renderer/views/imgViewer/components/SingleViewer.vue'
import { inject, onMounted, ref, provide } from 'vue'
import {
  aspectType,
  EnumAllViewType,
  EnumOpTypes,
  loadSingleViewType,
  opMsgType
} from '@renderer/views/imgViewer/imgTypes'
import axios from 'axios'
import { ISliceInfo } from '@renderer/views/imgViewer/components/types'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useGlobalLoading } from '@renderer/utils/useGlobalLoading'

import { GlobalNotification } from '@renderer/components/Toast/GlobalNotification'
import PhaseChoose from '@renderer/views/imgViewer/components/PhaseChoose.vue'
import PerformanceOpBtn from '@renderer/views/imgViewer/performance/PerformanceOpBtn.vue'
import MipChart from '@renderer/views/imgViewer/performance/MipChart.vue'

const imgSrcRef = ref('')
const { showLoading, hideLoading } = useGlobalLoading()
const { ioInstance, baseUri, throughGatewayFlag, sendMsg } = inject('pyImgHandlerIo') as any

const phaseInfoRef = ref<any>({
  current: 0,
  total: 1
})

const mtfRef = ref<any>(null)
provide('windowId', EnumAllViewType.stack)
provide('viewType', EnumAllViewType.stack)
provide('phaseInfo', phaseInfoRef)
provide('activeViewType', EnumAllViewType.stack)
provide('mtfInfo', mtfRef)
const fourCornerInfoRef = ref({})
const gotImgRef = ref(false)

const sliceInfoRef = ref<ISliceInfo>()

ioInstance.on('image', (data) => {
  if (data?.stack) {
    gotImgRef.value = true
    console.log('收到image,时间是：', new Date().toISOString())
    hideLoading()
    imgSrcRef.value = `${data.stack.img}`
    fourCornerInfoRef.value = data.stack.info_layer
    sliceInfoRef.value = data.stack.slice_info
    phaseInfoRef.value = data.stack.phase_info
  }
  if (data?.stack?.mtf_dict) {
    mtfRef.value = data.stack.mtf_dict
  }
})

const aspectRef = ref<any>(null)

const setAspect = async (args: aspectType) => {
  const { width, height } = args
  handleAspectChange(width, height)
  aspectRef.value = {
    width,
    height
  }
}

const handleAspectChange = (width: number, height: number) => {
  if (!gotImgRef.value) {
    return
  }
  const msg = {
    viewType: EnumAllViewType.stack,
    opType: 'resize',
    size: {
      [EnumAllViewType.stack]: {
        width: width,
        height: height
      }
    }
  }
  sendMsg(msg)
}

const setDicomPath = async (dicomPath) => {
  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`
  await axios.post(`${prefix}loadPathDicom`, {
    dicom_folder_path: dicomPath
  })
}
const setAspect2Server = async () => {
  const msg: loadSingleViewType = {
    viewType: EnumAllViewType.stack,
    opType: EnumOpTypes.setSize,
    size: aspectRef.value
  }
  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`
  await axios.post(`${prefix}setSize`, msg)
}

onMounted(() => {
  console.log('mounted')
  const open = () => {
    ElMessageBox.prompt('输入加载的服务器dicom路径：', 'Tip', {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      // inputValue: 'D:\\test\\py_test_path1'
      // inputValue: 'D:\\test\\test_4d'
      inputValue: 'D:\\test\\py_test_path'
    })
      .then(async ({ value }) => {
        if (!ioInstance.connected) {
          GlobalNotification({
            title: 'Error',
            message: 'Socket io disconnected',
            type: 'error'
          })
          return
        }
        showLoading('加载中')
        await setDicomPath(value)
        await setAspect2Server()
      })
      .catch(() => {})
  }
  open()
})
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full h-[600px] flex">
      <div class="w-[500px] h-[600px]">
        <div class="w-full h-full">
          <single-viewer
            :view-type="EnumAllViewType.stack"
            @set-aspect="(args) => setAspect(args as aspectType)"
            :img-src="imgSrcRef"
            :fourCornerInfo="fourCornerInfoRef"
            :sliceInfo="sliceInfoRef"
          />
        </div>
      </div>
      <div class="flex-1">
        <performance-op-btn />

        <div class="w-[500px] h-[300px]">
          <mip-chart />
        </div>
      </div>
    </div>
    <div class="h-[30px] w-full">
      <phase-choose />
    </div>
  </div>
</template>

<style scoped></style>
